<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript" src="../jquer-turns.1.1.0.js"></script>
    <script type="text/javascript">
    /*
    			$(父元素).turns({
    				sonObj:包裹轮播元素的父元素,
    				sonSon:包裹图片的元素,
    				preBtn:左按钮放在父元素的同级
    				nxtBtn:右按钮放在父元素的同级
    			})
    	 */
    $(function() {
        $('#box').turns({
            "sonObj": '.wraps',
            "sonSon": '.wrap',
            'prvBtn': ".left_btn",
            "nxtBtn": ".right_btn"
        })
    })
    </script>
    <title>Document</title>
    <style type="text/css">
    #f {
        overflow: hidden;
        position: relative;
        width: 510px;
        height: 454px;
    }
    
    * {
        padding: 0;
        margin: 0;
    }
    
    #box {
        width: 510px;
        height: 454px;
        border: 1px solid black;
        position: relative;
    }
    
    #box .wraps {
        position: absolute;
        width: 2040px;
    }
    /*序列号  自动成只要给一个.lilist添加样式即可*/
    #box .lilist{
    	position:absolute;
    	z-index:10;
    	bottom:10px;
    	left:35%;
    }
    #box .lilist li{
    	float: left;
        width: 20px;
        height: 20;
        border-radius: 50%;
        background: black;
        color: white;
        list-style: none;
        text-align: center;
        line-height: 20px;
        font-family: 微软雅黑;
        margin-left: 5px;
        cursor:default;
    }
     #box .lilist li.hover{
     	background:#AC0000;
     }
    
    #box .wraps .wrap {
        float: left;
    }
    
    #f .left_btn,
    #f .right_btn {
        position: absolute;
        top: 35%;
        display: block;
        width: 50px;
        height: 50px;
        font-size: 50px;
        z-index: 10;
        cursor: pointer;
        background: rgba(0, 0, 0, 0.7);
        line-height: 50px;
        text-align: center;
        color: white;
    }
    
    #f .right_btn {
        right: 0px;
    }
    </style>
</head>

<body>
    <div id="f">
        <span class="left_btn"><</span>
        <div id="box">
            <div class="wraps">
                <div class="wrap">
                    <img src="./img/1.jpg" height="454" width="510" alt="" />
                </div>
                <div class="wrap">
                    <img src="./img/2.jpg" height="454" width="510" alt="" />
                </div>
                <div class="wrap">
                    <img src="./img/3.jpg" height="454" width="510" alt="" />
                </div>
                <div class="wrap">
                    <img src="./img/1.jpg" height="454" width="510" alt="" />
                </div>
            </div>
        </div>
        <span class="right_btn">></span>
    </div>
</body>

</html>
